<template>
  Comments
  <el-table :data="CommentsData" style="width: 100%" table-layout="fixed">
    <el-table-column type="expand">
      <template #default="props">
        <div style="padding-left: 1rem; background-color: #F0F2F5;">
          <h3>Replys:</h3>
          <el-table :data="props.row.replys" table-layout="fixed">
            <el-table-column prop="id" label="ID"/>
            <el-table-column prop="name" label="Name"/>
            <el-table-column prop="date" label="Date"/>
            <el-table-column prop="at" label="At"/>
            <el-table-column prop="text" label="Text"/>
            <el-table-column fixed="right" prop="id" label="Operation" width="120">
              <template #default="scope">
                <el-button link type="primary" size="small">Edit</el-button>
                <el-button link type="danger" size="small">Delete</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
    </el-table-column>
    <el-table-column fixed prop="id" label="ID" width="150" />
    <el-table-column prop="articleID" label="ArticleID" width="120" />
    <el-table-column prop="name" label="Name" width="120" />
    <el-table-column prop="date" label="Date" width="120" />
    <el-table-column prop="text" label="Text" width="200" />

    <el-table-column fixed="right" label="Edit" width="65">
      <el-button link type="primary" size="small">Edit</el-button>
    </el-table-column>
    <el-table-column fixed="right" prop="id" label="Delete" width="65">
      <template #default="scope">
        <!-- <el-switch
          v-model="scope.row.admin"
          :active-value="true"
          @change="setAdmin($event, scope.row.id)"
        /> -->
        <el-button link type="danger" size="small">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref } from 'vue';
import { getComments_all } from '../../api/api';

// 评论列表
const CommentsData = ref()
// 从服务器获取数据
getComments_all().then(response => {
  CommentsData.value = response.data
}).catch(error => {
  console.log(error)
})
</script>

<style scoped></style>